<template>
	<view class="mainClass">
		<view class="mainClassTop">
			<image src="@/pagesB/static/dbzj.png" mode=""></image>
		</view>
		
		<view class="infoList"> 
			<view class="infoListItem" >
				<view class="infoListItemTitle">
					诸城市人大代表之家导引图 
				</view>
				 
				<view class="tabsList">
					<u-tabss  :list="xcjzTypeList" :current="titleCoust" @change="sxconfirm" :show-bar="false" name="label"
					 :is-scroll="true"></u-tabss>
			</view>
			</view>
		</view>
		
		<!-- <view class="ismap">
			
			<view class="" style="z-index: 99999;position: absolute;width: 100rpx;height: 100rpx;background-color: red;bottom: 160rpx;left: 100rpx;">
				
			</view>
		</view> -->
		
		<view class="imgN">
			<image src="@/pagesB/static/NB-Map.png" mode="">
			</image>
		</view>

		
	</view>
</template>

<script>
	import uTabss from '@/components/u-tabss/u-tabss.vue'
	export default {
		data() {
			return {
				titleCoust:0,
				xcjzTypeList:[],
			}
		},
		components:{
			uTabss
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getList()
		},
		methods: {
			sxconfirm(e){
				console.log("eee",e)
				let that = this
				this.titleCoust = e
				uni.navigateTo({
					url:'../tbwtInfo/tbwtInfo?id=' + that.xcjzTypeList[e].dbzjDeptId
				})
			},
			getZJ(e){
				uni.navigateTo({
					url:'/pagesB/msys/dbzjInfo/dbzjInfo?id=' + e.id
				})
			},
			getList(){
				let that = this
				let url = '/minqingzhitong/msManageDept/list';
				this.$request(url, {
					type: "1",
					pageNum:'1',
					pageSize:'999'
				} , {
					load: true
				}).then((res) => {
					if(res.code == 200){
						that.xcjzTypeList = res.data.records
						that.$forceUpdate()
					}
					
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.mainClass {
		// position: fixed;
		width: 100%;
		min-height: 100vh;
		
		background-color: #ffffff;
		.mainClassTop {
			margin: 20upx;

			image {
				width: 720upx;
				height: 360upx;
			}
		}

		
		
		.infoList{
			.infoListItem{
				.infoListItemTitle{
					line-height: 80upx;
					margin-left: 20upx;
					text-align: left;
					padding: 0 20upx;
					border-left: 10upx solid #D0021B;
					font-size: 34upx;
					color: #333333;
					font-weight: bold;
				}
				
				.infoListItemList{
					padding: 0 30upx; 
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					.infoListItemListItem{
						font-size: 28upx;
						padding: 20upx;
						color: #333333;
						max-width: 330upx;
						min-width: 330upx;
						background-color: #F6F6F6;
						text-align: center;
						margin-bottom: 20upx;
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow:ellipsis;
					}
				}
			}
		}
	}
	
	.tabsList{
		display: flex;
		align-items: center;
	}
	
	.imgN{
		padding: 20upx 30upx;
		image{
			width: 670upx;
			height: 544upx;
		}
	}
	
	.ismap{
		z-index: 99999;
	}
</style>
